<template>
<div class="form">
	<Header></Header>
	<div  class="about w1000">
		<h1>Form表单</h1>
		<div class="">
			<div style="color: darkgoldenrod;">
				<input type="text" v-model="message" value="this is vue.js" @blur="messageBlur"> 
				<p>{{message}}</p>
				<input type="text" v-model.trim="messageTrim" value="this is vue.js" @blur="messageTrimBlur">
				<p>{{messageTrim}}</p>
			</div>
			<!-- 多文本框 -->
			<div>
				<textarea name="" id="" cols="30" rows="10" v-model="textareaHtml"></textarea>
			</div>
			<!-- 单选框 -->
			<div>
			性别：
			<input type="radio" id="man" value="帅哥" v-model="data.sex">
			<label for="man">男</label>
			<input type="radio" id="male" value="美女" v-model="data.sex">
			<label for="male">女</label>
			</div>
			<!-- 复选框 -->
			<div>
			兴趣:
			<input type="checkbox" id="jack" value="book" v-model="data.interest">
			<label for="jack">jack</label> 
			<input type="checkbox" id="john" value="swim" false-value="no-swim" v-model="data.interest">
			<label for="john">john</label>
			</div>
			<div>
			身份：
			<select name="identity" id="identity" v-model="data.identity">
			<option value="teacher" selected>教师</option>
			<option value="doctor">医生</option>
			<option value="lawyer">律师</option>
			</select>
			</div>
			<div>
				<select v-model="data.multipleVal" multiple>
					<option :value="item.value" v-for="item in mulOpt" :key="item.value">
					{{item.text}}
					</option>
				</select>
			</div>
			<div>
				{{data}}
			</div>
		</div>
	</div>
</div>
</template>

<script>
import Header from '../components/header.vue';

export default {
	components: { Header },
	data() {
		return {
			message : 'no show this is vue.js',
			messageTrim : '',
			textareaHtml : '<p>this is textarea！</p>',
			data :{
				sex : "",
				name : "",
				interest : [],
				identity:'doctor',
				multipleVal : [],
			},
			mulOpt : [
				{ text : '女孩', value : 'girl'},
				{ text : '男孩', value : 'boy'}
			]
		}
	},
	methods:{
		messageBlur(e){
			console.log(e.target.value);
		},
		messageTrimBlur(e){
			console.log(e,e.target.value);
		}
	},
	created() {
		
	}
}
</script>
